<template>
    <div class="register-page">
      <h2>Register</h2>
      <form @submit.prevent="handleRegister">
        <div class="form-group">
          <label for="username">Username:</label>
          <input v-model="user.username" type="text" id="username" required>
        </div>
        <div class="form-group">
          <label for="password">Password:</label>
          <input v-model="user.password" type="password" id="password" required>
        </div>
        <button type="submit">Register</button>
      </form>
      <p v-if="message">{{ message }}</p>
    </div>
  </template>
  
  <script>
  import { register } from '@/api/user.js';
  
  export default {
    name: 'Register',
    data() {
      return {
        user: {
          username: '',
          password: ''
        },
        message: ''
      };
    },
    methods: {
      handleRegister() {
        register(this.user)
          .then(response => {
            this.message = 'Registration successful!';
            // Optionally, redirect to login page or home page after successful registration
            this.$router.push('/login');
          })
          .catch(error => {
            this.message = 'Registration failed: ' + (error.response && error.response.data.message ? error.response.data.message : error.message);
          });
      }
    }
  };
  </script>
  
  <style scoped>
  /* Add your CSS here for styling */
  .form-group {
    margin-bottom: 15px;
  }
  </style>